<div id="cuotaList">
<table>
        	<thead class="nav">
        		<tr>
        			<td>
        				No.
        			</td>
        			<td>
        				Monto
        			</td>
        			<td>
        				Fecha de Nacimiento
        			</td>
        			<td>
        				Pagada
        			</td>
        			<td>
        				
        			</td>
        		</tr>
        	</thead>
</table>
    <g:each var="cuota" in="${adelantoInstance.cuotas}" status="i">
        
        <!-- Render the cuota template (_cuota.gsp) here -->
        	<g:render template='cuota' model="['cuota':cuota,'i':i,'hidden':false]"/>
        <!-- Render the cuota template (_cuota.gsp) here -->
    </g:each>
</div>
<input type="button" value="Nueva" id="addCuota" />
<script type="text/javascript">

var childCount = ${adelantoInstance?.cuotas?.size()} + 0;

    (function($){
    	   $(function(){
    	      // Run on DOM ready
    	      
    		 //bind click event on delete buttons using jquery live
    	        $('.del-cuota').live('click', function() {
    	            //find the parent div
    	            var prnt = $(this).parents(".cuota-div");
    	            //find the deleted hidden input
    	            var delInput = prnt.find("input[id$=deleted]");
    	            //check if this is still not persisted
    	            var newValue = prnt.find("input[id$=new]").attr('value');
    	            //if it is new then i can safely remove from dom
    	            if(newValue == 'true'){
    	                prnt.remove();
    	            }else{
    	                //set the deletedFlag to true
    	                delInput.attr('value','true');
    	                //hide the div
    	                prnt.hide();
    	            }
    	        }); 
    	   });


    	   $('#addCuota').click(function(){   
			   var clone = $("#cuota_clone").clone()
			   var htmlId = 'cuotaList['+childCount+'].';
			   var cuotaInput = clone.find("input[id$=monto]");

			   clone.find("input[id$=id]")
			          .attr('id',htmlId + 'id')
			          .attr('name',htmlId + 'id');
			   clone.find("input[id$=deleted]")
			           .attr('id',htmlId + 'deleted')
			           .attr('name',htmlId + 'deleted');
			   clone.find("input[id$=new]")
			           .attr('id',htmlId + 'new')
			           .attr('name',htmlId + 'new')
			           .attr('value', 'true');
			   cuotaInput.attr('id',htmlId + 'monto')
			           .attr('name',htmlId + 'monto');

			   clone.find("input[id$=isPagada]")
	           		.attr('id',htmlId + 'isPagada')
	           		.attr('name',htmlId + 'isPagada');

			   clone.find("input[name$=fechaVencimiento]")
	           		.attr('value','date.struct')
	           		.attr('name',htmlId + 'fechaVencimiento');
			   clone.find("select[id$=fechaVencimiento_month]")
			           .attr('id',htmlId + 'fechaVencimiento_month')
			           .attr('name',htmlId + 'fechaVencimiento_month');
			   clone.find("select[id$=fechaVencimiento_year]")
			           .attr('id',htmlId + 'fechaVencimiento_year')
			           .attr('name',htmlId + 'fechaVencimiento_year');        

			   clone.attr('id', 'cuota'+childCount);
			   $("#cuotaList").append(clone);
			   clone.show();
			   cuotaInput.focus();
			   childCount++;

		   });
    	   // Run right away
    	})(jQuery);
    	    
    
</script>



